<template>
  <div class="search">
    <!-- <h2>开始时间:{{$route.query.startDate}}</h2>
    <h2>结束时间:{{$route.query.endDate}}</h2> -->
    <div class="CeilingHight">
      <div class="Ceiling">
        <NavBar>
          <template #title>
            <SearchBar
              :title="currentCity"
              height="35px"
              keyword="搜索广州的景点、地标、房源"
              @click="SearchBarClick"
            ></SearchBar>
          </template>
        </NavBar>

        <!-- 下拉列表  位置-价格/人数-欢迎度排序-筛选-->
        <div>
          <DropdownSelect :allConditions="allConditions"></DropdownSelect>
        </div>

        <!-- 优惠 - 多人入驻 -->
        <div class="tab-wrapper">
          <TabSelect :hotFilters="hotFilters" class="tab-wrapper"></TabSelect>
        </div>
      </div>
    </div>

    <!-- 列表数据 -->
    <div class="list">
      <SearchListItem :items="items"></SearchListItem>
    </div>

    <SearchPanel 
    v-if="showSearchPanel"
     @cancel="handleCancel" 
     @search="handleSearch"
     >
    </SearchPanel>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import SearchBar from '@/components/search-bar/search-bar.vue'
  import NavBar from '@/components/nav-bar/nav-bar.vue'
  import DropdownSelect from '@/components/dropdown-select/dropdown-select.vue'
  import TabSelect from '@/components/tab-select/tab-select.vue'
  import SearchListItem from '@/components/search-list-item/search-list-item.vue'
  import useCityStore from '@/stores/modules/city'
  import useSearchStore from '@/stores/modules/search'
  import SearchPanel from './cpns/search-panel/search-panel.vue'
  import { storeToRefs } from 'pinia'
  const cityStore = useCityStore()
  const { currentCity } = storeToRefs(cityStore)
  const searchStore = useSearchStore()
  // 发送网络请求
  searchStore.fetchResultHouse()
  searchStore.fetchSearchConditions()
  const { searchConditions, searchHouse } = storeToRefs(searchStore)

  const allConditions = computed(() => {
    return searchConditions.value?.allConditions
  })
  const hotFilters = computed(() => {
    return searchHouse.value?.hotFilters
  })
  const items = computed(() => {
    return searchHouse.value?.items
  })

  const showSearchPanel = ref(false)
  const SearchBarClick = () => {
    showSearchPanel.value = true
  }
  const handleCancel = () => {
    showSearchPanel.value = false
  }
  const handleSearch = () => {}
</script>

<style lang="less" scoped>
  .Ceiling {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
  }

  .CeilingHight {
    height: 150px;
  }

  .search {
    height: 100vh;
    z-index: 9;
    position: relative;
    background: #f2f4f6;
    overflow-y: auto;
  }
</style>
